<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- 1.push() 在最后一个追加
                 2.pop() 删除最后一个
                 3.shift() 删除第一个元素
                 4.unshift() 在开头追加一个元素
                 5.splice() 在指定位置替换元素 英 [splaɪs]  美 [splaɪs] 
                 6.sort() 数组排序 默认是按照字符编码的顺序进行排序
                 7.reverse() 数组反转 
			-->
			<h3>
			<span>[</span>
			<span v-for="(value,index) in array">
                <span v-if="index!=0">,</span>
				<span>'{{value}}'</span>

			</span>
			<span>]</span>
			</h3>
			<input type="text"v-model.number="msg" />
			<button @click="push">push</button>
			<button @click="pop">pop</button>
			<button @click="shift">shift</button>
			<button @click="unshift">unshift</button>
			<button @click="splice">splice</button>
			<button @click="sort()">sort</button>
			<button @click="reverse">reverse</button>
				




		</div>

		<script src="../js/vue.js"></script>
		<script>
			const APP = new Vue({
				//不要忘记# .等符号
				el: '#app',
				data: {
					array: ['1', 'a', '2'],
					msg: 0

				},
				methods: {
					push() {
						this.array.push(this.msg)
					},
					pop(){
						this.array.pop()
					},
					shift(){
						this.array.shift()
					},
					unshift(){
						this.array.unshift(this.msg)
					},
					/* 三个参数
					 1.开始位置
					 2.要替换的元素个数
					 3.要用什么来替换,替换多个元素可以写多个值,逗号隔开*/
					splice(){
						
						
						/* 替换一个元素 */
						// this.array.splice(0,1,this.msg)
						/* 替换两个元素 */
						// this.array.splice(0,2,this.msg,this.msg)
						/* 最后一个元素替换为msg */
						this.array.splice(this.array.length-1,1,this.msg)
						/* 删除第二个元素 */
						// this.array.splice(1,1)
					},
					sort(){
						this.array.sort()
					},
					reverse(){
						this.array.reverse()
					}
				}
			})
		</script>
	</body>
</html>
